<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vitepress';
import { useI18n } from 'vue-i18n';
import { useCommonStore } from '../stores/common';
import { NavItem } from '../shared/@types/interface';
import footerLogo from '@/assets/footer-logo.png';
import wechat from '@/assets/wechat.png';
import bilibili from '@/assets/bilibili.png';
import copyright from '@/assets/copyright.png';
const { t } = useI18n();
const useCommon = useCommonStore();
const router = useRouter();
const isHome = ref(true);
const socialIcons = [
  {
    id: 'wechat',
    img: wechat,
    link: '',
  },
  {
    id: 'bilibili',
    img: bilibili,
    link: '',
  },
  // {
  //   id: 'tictalk',
  //   img: tictalk,
  //   link: '',
  // },
  // {
  //   id: 'qq',
  //   img: qq,
  //   link: '',
  // },
];
// footer
const footerItems = computed(() => {
  return {
    follow_us: t('footer.follow_us'),
    tutorials: [
      { id: 'tutorials', label: t('footer.tutorials.title') },
      { id: 'user_guide', label: t('footer.tutorials.user_guide') },
      { id: 'view_tutorials', label: t('footer.tutorials.view_tutorials') },
    ],
    support: [
      { id: 'support', label: t('footer.support.title') },
      { id: 'community', label: t('footer.support.community') },
      { id: 'news', label: t('footer.support.news') },
      { id: 'security', label: t('footer.support.security') },
      { id: 'ascend_forum', label: t('footer.support.ascend_forum') },
    ],
    links: [
      { id: 'reference_link', label: t('footer.reference_link.title') },
      {
        id: 'ascend_developer_zone',
        label: t('footer.reference_link.ascend_developer_zone'),
      },
      { id: 'modelarts', label: t('footer.reference_link.modelarts') },
    ],
    footerOptions: [
      {
        id: 'service_status',
        label: t('footer.service_status'),
        path: 'https://status.mindspore.cn/',
      },
      {
        id: 'legal',
        label: t('footer.legal'),
        path: '/legal/',
      },
      {
        id: 'privacy_policy',
        label: t('footer.privacy_policy'),
        path: '/privacy/',
      },
    ],
  };
});

const handleNavClick = (link: NavItem) => {
  if (link.path.startsWith('https:')) {
    window.open(link.path, '_blank');
  } else {
    // router.go(`/${useCommon.language}` + link.path);
    window.open(`/${useCommon.language}` + link.path, '_blank');
  }
};
const goHome = () => {
  router.go(`/${useCommon.language}/home/`);
};
</script>
<template>
  <div class="footer wrapper">
    <div class="footer-logo">
      <a aria-current="page" class="footer-logo-a active" href="/">
        <img alt="mindspore logo" class="logo" :src="footerLogo">
      </a>
    </div>
    <div class="footer-docker">
      <ul >
        <li v-for="item in footerItems.tutorials">
        <!-- <a href=""></a> -->
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div>
      <ul>
        <li v-for="item in footerItems.support">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div>
      <ul>
        <li v-for="item in footerItems.links">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div>
      <p>关注我们</p>
      <ul class="socialList">
        <li v-for="item in socialIcons" class="socialList-item">
          <img class="icon" :src="item.img" :alt="item.id" />
        </li>
      </ul>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="copyright">
      <span>版权所有©MindSpore 2022</span>
      <a
        class="copynum"
        href="https://beian.miit.gov.cn"
        rel="noopener noreferrer"
        target="_blank"
        >粤A2-20044005号</a
      >
       <a class="footer-record" href="https://beian.miit.gov.cn">
    <img
      alt="MindSpore官网备案"
      class="copyImg2 mobile-hide"
      :src="copyright"
    />
    <span class="keepRecord">粤公网安备</span>
    <span class="recordNum">44030702002890号</span>
  </a>
    </div>
    <div class="footer-option">
      <a
        rel="noopener noreferrer"
        target="_blank"
        v-for="link in footerItems.footerOptions"
        :key="link.id"
        href="javascript:;"
        class="link"
        @click="handleNavClick(link)"
        >{{ link.label }}</a
      >
    </div>
   
  </div>

 
</template>
<style scoped lang="scss">
.footer {
  color: #fff;
  margin-top: 96px;
  padding: 50px 252px 0;
  background: #02172A;
  height: 270px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
ul li:first-child{
  font-size: 16px;
font-weight: normal;
color: #FFFFFF;
line-height: 18px;
padding-bottom: 18px;
}
li{
  padding-bottom: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
.socailList{
 display: grid;
        position: relative;
        grid-template-columns: repeat(4,40px);
        gap: 10px;
  &-item{
     width: 40px;
          height: 40px;
          position: relative;
          .icon{
 width: 40px;
          height: 40px;
          }
  }
}

.footer-copyright {
  padding: 30px 252px 0;
  height: 100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  .footer-option {
    text-align: center;
    .link {
      color: var(--theme-text);
      font-size: 14px;
      display: inline-block;
      padding: 0 12px;
      border-right: 1px solid var(--theme-text-ass);
    }
  }
  .copyright {
    font-size: 14px;
    color: var(--theme-text);
    .footer-record {
      padding-top:10px;
  display:flex;
  color: var(--theme-text);
  font-size: 12px;
  .keepRecord {
    padding-left: 10px;
  }
}
  }
  .copynum {
    color: var(--theme-text);
    margin-left: 0.5rem;
  }
}


@media (max-width: 1100px) {
  .footer {
    padding: 16px;
    display: grid;
    justify-content: center;
    width: 100%;
    &-logo {
      display: none;
    }
    &-right {
      order: -1;
      width: 100%;
      text-align: center;
      padding-bottom: 24px;
      .footer-code {
        justify-content: center;
      }
    }
  }
}
</style>
